<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 关键字</span>
      <el-input v-model="serchName" style="width: 180px;" size="mini" placeholder="请输入用户进行查询" @change="getListData" />
      <span class="lable-span"><i class="el-icon-search" /> 项目类型</span>
      <el-select v-model="serchName" size="mini" style="width: 180px;" placeholder="请选择项目类型" @change="getListData">
        <el-option :key="'-999'" label="所有项目类型" :value="'-999'" />
        <el-option v-for="item in ImportanceList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
      </el-select>
      <span class="lable-span"><i class="el-icon-search" /> 项目状态</span>
      <el-select v-model="serchName" size="mini" style="width: 180px;" placeholder="请选择项目类型" @change="getListData">
        <el-option :key="'-999'" label="所有项目类型" :value="'-999'" />
        <el-option v-for="item in ImportanceList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
      </el-select>
      <el-button size="mini" class="ml-15" type="primary" @click="research">查询</el-button>
      <el-button size="mini" class="ml-15" @click="research">重置</el-button>
      <el-button size="mini" class="ml-15" type="success" @click="addData">新增</el-button>
    </div>
    <!-- 列表 -->
    <el-table :data="listData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目地址" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业主" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.userlist }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开工日期" align="center" width="130">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目状态" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcProgress==0?'进行中':scope.row.ctcProgress==1?'完工':'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleGetDetail(scope.row.ctcid)">编辑</el-button>
          <el-button type="primary" size="mini" @click="getDetail(scope.row.ctcid)">查看</el-button>
          <el-button size="mini" type="danger" @click="handleDeleted(scope.row.ctcid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改 -->
    <PopWindow v-show="showForm" :title="title" :mode="modeValue" @close="closeForm" @addHandle="addHandle" @updateHandle="updateHandle">
      <el-form ref="formData" :model="formData" label-width="100px" size="small" :rules="formDataRules">
        <el-form-item label="项目名称" prop="ctcName">
          <el-input v-model="formData.ctcName" class="my-input" />
        </el-form-item>
        <el-form-item label="项目地址" prop="ctcAddress">
          <el-input v-model="formData.ctcAddress" class="my-input" />
        </el-form-item>
        <el-form-item label="项目描述" prop="ctcDesc">
          <el-input v-model="formData.ctcDesc" type="textarea" resize="none" :rows="3" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="ctcType">
              <el-select v-model="formData.ctcType" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="开工日期" prop="startTime">
              <el-date-picker v-model="formData.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="搬运师傅" prop="translist">
              <el-select v-model="formData.translist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="敲打师傅" prop="beatlist">
              <el-select v-model="formData.beatlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="水电师傅" prop="hydrolist">
              <el-select v-model="formData.hydrolist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="防水师傅" prop="prooflist">
              <el-select v-model="formData.prooflist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业主" prop="userlist">
              <el-select v-model="formData.userlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="预计完工日期" prop="forecastTime">
              <el-date-picker v-model="formData.forecastTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="设计师" prop="desiglist">
              <el-select v-model="formData.desiglist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="泥水师傅" prop="mudlist">
              <el-select v-model="formData.mudlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="木作师傅" prop="carpenlist">
              <el-select v-model="formData.carpenlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="油漆师傅" prop="painterlist">
              <el-select v-model="formData.painterlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="其他师傅" prop="otherlist">
              <el-select v-model="formData.otherlist" multiple placeholder="请选择项目类型" style="width: 100%;">
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="材料预览表" prop="matlist">
          <el-upload
            class="avatar-uploader"
            :action="$uploadImg"
            :show-file-list="false"
            :with-credentials="true"
            name="files"
            accept="image/png, image/jpeg"
            :on-success="handleLisenceSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="formData.matlist" :src="$urlHost + formData.matlist" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed #d9d9d9;" />
            <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过10MB" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
        <el-form-item label="工期计划" prop="LicenseImg">
          <el-upload
            class="avatar-uploader"
            :action="$uploadImg"
            :show-file-list="false"
            :with-credentials="true"
            name="files"
            accept="image/png, image/jpeg"
            :on-success="handleLisenceSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="formData.matlist" :src="$urlHost + formData.matlist" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed #d9d9d9;" />
            <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过10MB" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" class="my-input" />
        </el-form-item>
      </el-form>

    </PopWindow>
    <pagination v-show="total > 0" :total="total" :page-size.sync="listQuery.Limit" @pagination="getListData" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import PopWindow from '@/components/PopWindow'
import {
  addProject,
  editProject,
  deleteProject,
  getProjectList,
  getProjectDetail
} from '@/api/proList'
export default {
  name: 'Project',
  components: {
    Pagination,
    PopWindow
  },
  data() {
    return {
      licenceImg: '',
      editable: false, // 日期选择器不可手动写入
      total: 21, // 总数
      listData: [],
      serchName: '',
      ImportanceList: [],
      typeList: [{
        SubName: '半包',
        SubNum: 1
      },
      {
        SubName: '全包',
        SubNum: 2
      }
      ],
      listQuery: {
        str: '', // 关键字
        ctcType: 0, // 类型
        ctcProgress: 0, // 状态
        page: 1,
        Limit: 10
      },
      showForm: false, // 新增修改弹窗显示否
      title: '新增',
      modeValue: 'add',
      formData: {
        ctcName: '', //
        ctcAddress: '', // 项目标题
        ctcType: '', // 项目类型
        ctcDesc: '', // 项目描述
        userlist: '', // 业主
        matlist: '', // 材料预览表
        desiglist: '', // 设计师
        suplist: '', // 监理
        translist: '', // 搬运师傅
        mudlist: '', // 泥水师傅
        beatlist: '', // 敲打标题
        carpenlist: '', // 木作标题
        hydrolist: '', // 水电标题
        painterlist: '', // 油漆师傅
        prooflist: '', // 防水师傅
        otherlist: '', // 其他师傅
        remark: '', // 备注
        ctcPlan: '', // 工期计划
        startTime: '', // 开工时间
        forecastTime: '' // 预计完工时间
      },
      // 表单验证规则
      formDataRules: {
        ctcName: [{
          required: true,
          message: '请输入项目名称',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '项目名称100个字内',
          trigger: 'blur'
        }
        ],
        ctcAddress: [{
          max: 100,
          message: '项目地址100个字内',
          trigger: 'blur'
        }],
        ctcDesc: [{
          max: 300,
          message: '项目描述300个字内',
          trigger: 'blur'
        }],
        remark: {
          max: 300,
          message: '请输入1-300个字',
          trigger: 'blur'
        }
      }
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData(page) {
      const that = this
      that.$loadings()
      that.listQuery.page = page || 1
      getProjectList(that.listQuery).then((res) => {
        that.$loadings().close()
        that.listData = res.data
        that.page = page
        that.total = res.count
      }).catch(() => {
        that.$loadings().close()
      })
    },
    resetTemp() {
      this.title = ''
      this.formData = {
        ctcName: '', //
        ctcAddress: '', // 项目标题
        ctcType: '', // 项目类型
        ctcDesc: '', // 项目描述
        userlist: '', // 业主
        matlist: '', // 材料预览表
        desiglist: '', // 设计师
        suplist: '', // 监理
        translist: '', // 项目标题
        mudlist: '', // 项目标题
        beatlist: '', // 项目标题
        carpenlist: '', // 项目标题
        hydrolist: '', // 项目标题
        painterlist: '', // 项目标题
        prooflist: '', // 项目标题
        otherlist: '', // 项目标题
        remark: '', // 项目标题
        ctcPlan: '', // 项目标题
        startTime: '', // 项目标题
        forecastTime: '' // 项目标题
      }
    },
    addData() {
      this.resetTemp()
      this.title = '项目新增'
      this.modeValue = 'add'
      this.$nextTick(() => {
        this.$refs['formData'].clearValidate()
        this.showForm = true
      })
    },
    addHandle() {
      var that = this
      that.$refs.formData.validate(valid => {
        if (valid) {
          that.$loadings()
          addProject(that.formData).then(data => {
            that.$loadings().close()
            that.$message({
              type: 'success',
              message: '添加成功!'
            })
            that.getListData()
            that.closeForm() // 重置表单
          })
            .catch(() => {
              that.$loadings().close()
            })
        } else {
          return false
        }
      })
      this.showForm = false
    },
    research() {
      this.showForm = true
    },
    closeForm() {
      this.showForm = false
    },
    updateHandle() {
      console.log(this.modeValue)
      this.showForm = false
    },
    handleGetDetail(id) {
      const that = this
      that.$loadings()
      getProjectDetail(id).then((res) => {
        that.$loadings().close()
        that.formData = {
          id: res.data.id,
          title: res.data.title,
          imgUrl: res.data.imgUrl,
          caseDesc: res.data.caseDesc,
          articleId: res.data.articleId
        }
        this.modeValue = 'edit'
        this.showForm = true
      }).catch((err) => {
        that.$loadings().close()
        console.log(err)
      })
    },
    // 营业执照上传成功回调
    handleLisenceSuccess(res, file) {
      this.imgLoding.close()
      this.$message({
        type: 'success',
        message: '上传成功!'
      })
      this.licenceImg = res.urlhttp + res.imgPath // 前台展示 绝对路径
      this.editFormData.LicenseImg = res.List // 后台接受 相对路径
      this.editFormData.LicenseThumbnail = res.imgPath // 后台接受 相对路径
    },
    handleDeleted(id) {
      const that = this
      console.log(id)
      that.$confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          that.$loadings()
          deleteProject({
            ctcid: id
          }).then((res) => {
            that.$loadings().close()
            that.$message({
              type: 'success',
              message: '操作成功!'
            })
            that.getListData()
          }).catch(() => {
            that.$loadings().close()
          })
        })
    },
    // 图片上传前回调
    beforeUpload(file) {
      this.imgLoding = this.$loading({
        lock: true,
        text: '图片上传中···',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.4)'
      })
      const isPNG = file.type === 'image/png'
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isPNG && !isJPG) {
        this.$message.error('上传图片只能是 PNG或JPG 格式!')
        this.imgLoding.close()
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!')
        this.imgLoding.close()
      }
      return (isPNG || isJPG) && isLt2M
    },
    showImg(url) {
      if (!url) {
        this.$message({
          type: 'error',
          message: '还未上传营业执照!'
        })
      } else {
        this.$alert('<img src="' + this.$urlHost + url +
						'" style="width: 100%"><p style="text-align: center;">右击在新标签页中打开图片查看原图</p>', '营业执照', {
          dangerouslyUseHTMLString: true,
          customClass: 'entercustom'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
